<template>
	<view style="background:#f2f5fa;overflow: hidden;">
		<view class="userInfo-wrap">
				<view class="avatarBtn-wrap">
					<button open-type="chooseAvatar"  @chooseavatar="onChooseAvatar" class="chooseAvatarBtn" plain="true">
						<u-avatar :src="uModel.avatar" size="80" shape="circle"/>
					</button>
				</view>
				
				<u--form labelAlign="left" :model="uModel" :rules="rules" ref="uForm" labelWidth="50px">
					<u-form-item label="昵称" prop="nickName" ref="item1">
					<u--input type="nickname" v-model="uModel.nickName" @blur="nicknameChange"/>
					</u-form-item>
					<u-form-item label="手机号" prop="phonenumber" ref="item2">
						<u--input v-model="uModel.phonenumber"/>
					</u-form-item>
					<u-form-item label="邮箱" prop="email" ref="item3">
						<u--input v-model="uModel.email"/>
					</u-form-item>
					<u-form-item label="性别" prop="sex" ref="item4">
						 <u-radio-group v-model="uModel.sex" @change="sexChange" >
						    <u-radio v-for="(item, index) in sexArr" :key="index"
						      :label="item.name"
						      :name="item.value" :customStyle="{marginRight: '20px'}"
						    >
						    </u-radio>
						  </u-radio-group>
					</u-form-item>
					
				</u--form>
		</view>
		<u-button @click="saveUserInfo" formType='submit'
		color="linear-gradient(to right, rgb(253, 119, 41), rgb(254, 172, 26))" 
		customStyle="margin:0rpx auto 20rpx auto;width:200rpx;">保存</u-button>
	</view>
</template>

<script>
	import {mapActions,mapState} from 'vuex'
	export default {
		computed:{
			...mapState('m_login',['token','userInfo'])
		},
		data() {
			return {
				uModel:{nickName:''},
				rules:{},
				sexArr:[{name:'男',value:'1'},{name:'女',value:'2'}],
			}
		},
		onReady() {
				//onReady 为uni-app支持的生命周期之一
		    	this.$refs.uForm.setRules(this.rules)
		},
		onLoad() {
			this.uModel={...this.userInfo}
			this.uModel.sex="1"
		},
		methods: {
			...mapActions('m_login',['saveWxUserAction','uploadAwartAction']),
			//头像选择
			onChooseAvatar(e){
				this.uploadAwartAction({data:e.detail.avatarUrl,success:res=>{
					this.uModel.avatar=res.data.url
				}})
			},
			
			nicknameChange(e){
				this.uModel.nickName=e
			},
			
			//性别选择
			sexChange(e){
				this.uModel.sex=e+''
				
			},
			//保存
			saveUserInfo(){
				this.saveWxUserAction({data:this.uModel})
				uni.$u.route({
					type:'switchTab',
					url: 'pages/my/my',
				})
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.userInfo-wrap{background:#fff;margin:30rpx 20rpx;padding:20rpx;
		.avatarBtn-wrap{padding:20px;display: flex;flex-direction: column;align-items: center;justify-content: center;}
		.chooseAvatarBtn{background-color:transparent;padding-left:0;padding-right:0;}
	}
	button[plain] {
		border: 0
	}
</style>
